<template>
  <div>
    <span class="ConsultationAddTitle">{{Title}}</span>
    <hr />
    <div class="Commentbox">
      <div id="listdiv">
        <a-list v-if="comments.length" :dataSource="comments" itemLayout="horizontal">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-comment
              :author="item.adminName ? item.adminName : item.memberName"
              :content="item.content"
              :datetime="item.ctime"
            >
              <div v-if="item.arr != null">
                <div
                  v-for="(item1, index1) in item.arr"
                  :key="index1"
                  style="overflow: hidden;float: left;cursor: pointer;"
                >
                  <img
                    style="width:7vw; margin-left: 10px;"
                    :src="'/file/file/download/' + item.arr[index1]"
                    @click="imgClick"
                    alt
                  />
                </div>
              </div>
            </a-comment>
          </a-list-item>
        </a-list>
        <a-modal class="modalClass" :visible="visible" @cancel="handleCancel" :footer="null">
          <img class="imgClass" :src="imageSrc" alt />
        </a-modal>
      </div>

      <a-pagination
        size="small"
        v-if="page1>5"
        @change="onPageChange"
        :current="pagination.current"
        :total="pagination.total"
        :pageSize="query.pageSize"
        style="margin-top: 10px;margin-bottom: 10px;"
      />

      <a-comment>
        <div slot="content">
          <a-form-item style="margin-bottom: 1vh;">
            <a-textarea
              :autosize="{ minRows: 1, maxRows: 4 }"
              style="height:8vh;"
              placeholder="回复内容......"
              @change="handleChange"
              :value="value"
            ></a-textarea>
          </a-form-item>
          <a-form-item>
            <a-form-item v-bind="formItemLayout" :help="`仅支持图片格式JPG、PNG，且每个文件大小不超过${imageSize}M`">
              <div class="clearfix">
                <a-upload
                  v-decorator="['upload']"
                  name="upfile"
                  :headers="henderstoken"
                  action="/file/file/upload"
                  listType="picture-card"
                  :fileList="otherfileList"
                  :data="{to}"
                  @preview="handlePreview3"
                  @change="handleChange3"
                >
                  <div v-if="otherfileList.length < 3">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">添加图片</div>
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible3" :footer="null" @cancel="handleCancel3">
                  <img alt="example" style="width: 100%" :src="previewImage3" />
                </a-modal>
              </div>
            </a-form-item>
            <a-button
              htmlType="submit"
              :loading="submitting"
              @click="handleSubmit"
              type="primary"
            >添加回复</a-button>
            <a-button style=" margin-left: 30px;" @click="tolist">返回</a-button>
          </a-form-item>
        </div>
      </a-comment>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { mapState } from "vuex";
export default {
  data() {
    return {
      Title: "",
      comments: [],
      submitting: false,
      value: "",
      moment,
      imgarr: [],
      id: "",
      visible: false,
      imageSrc: "",
      query: {
        page: 1,
        pageSize: 5,
        data: {}
      },
      henderstoken: {
        Authorization: localStorage.getItem("token"),
      },
      to:sessionStorage.getItem("memberNo") + "_" + sessionStorage.getItem("username"),
      pagination: { current: null, total: null },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
          md: { span: 10 }
        }
      },
      otherfileList: [],
      previewVisible3: false,
      previewImage3: "",
      page1: ""
    };
  },
  computed: {
    ...mapState({
      imageSize: state => state.imageSize
    })
  },
  mounted() {
    if (this.$route.query.id) {
      let id = this.$route.query.id;
      this.getConsultationdata(id);
      this.query.data.id = id;
      this.id = id;
    }
  },
  methods: {
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);

      this.query.page = page;
      this.query.pageSize = pageSize;
      this.getConsultationdata(this.id);
    },
    getConsultationdata(id) {
      this.$axios
        .post("chatRoom/selectChatRoom/detail", this.query)
        .then(res => {
          console.log(res);
          if (res.data.list.code == "OK") {
            this.Title = res.data.head;
            this.page1 = res.data.list.total;
            this.comments = res.data.list.list;
            this.pagination.current = res.data.list.current;
            this.pagination.total = res.data.list.total;
            this.getListHieght();
          } else {
            console.log(res);
          }
        });
    },
    handleSubmit() {
      if (!this.value) {
        this.$message.error("请输入内容");
        return;
      }
      this.submitting = true;
      console.log(this.id);

      for (let i = 0; i < this.otherfileList.length; i++) {
        this.imgarr.push(this.otherfileList[i].response.data);
      }
      console.log("图片数据", this.imgarr);

      this.$axios
        .post("/agent/chatRoom/replyChatRoom", {
          quoteId: this.id,
          content: this.value,
          arr: this.imgarr,
          status: true
        })
        .then(res => {
          console.log(res);
          this.submitting = false;
          this.otherfileList = [];
          this.imgarr = [];
          this.value = "";
          this.getConsultationdata(this.id);
        });
    },
    handleChange(e) {
      this.value = e.target.value;
    },
    tolist() {
      this.$router.push({ path: "/ConsultationList1" });
    },
    handlePreview3(file) {
      console.log("file", file);
      this.previewImage3 = file.url || file.thumbUrl;
      this.previewVisible3 = true;
    },
    handleCancel3() {
      this.previewVisible3 = false;
    },
    handleChange3({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      console.log(fileList);
      this.otherfileList = fileList;
      console.log(this.otherfileList);
    },
    imgClick(e) {
      // console.log(e.target.currentSrc)
      this.imageSrc = e.target.currentSrc;
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    getListHieght() {
      let aaa = setTimeout(function() {
        let listheight = document.getElementById("listdiv");
        console.log(listheight.offsetHeight);
        console.log(listheight.clientHeight);
        let H = ((document.body.clientHeight * 100) / 10000) * 34;
        console.log(H);
        if (listheight.offsetHeight > H) {
          listheight.style.height = "34vh";
        }
      }, 100);
    }
  }
};
</script>

<style lang="less" scoped>
.ConsultationAddTitle {
  font-size: 20px;
  font-weight: bold;
  margin-left: 8%;
}

.Commentbox {
  width: 86%;
  margin: 0 auto;
}

.modalClass {
  overflow: hidden;
}

.imgClass {
  vertical-align: middle;
  border-style: none;
  width: 100%;
}
hr {
  width: 85.5%;
  margin-top: 10px;
  height: 1px;
  border: none;
  background-color: #d0d0d0;
}
#listdiv {
  overflow-y: auto;
}

/*滚动条样式*/
#listdiv::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

#listdiv::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

#listdiv::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.ant-list-item {
  padding: 5px 0;
}

.ant-comment-inner {
  padding: 0;
}

.ant-comment-nested {
  margin-left: 0;
}
</style>